<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/html" id="bondBar">
        <div style="float:right">
            <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="bondInsert"><i class="layui-icon">&#xe654;</i>新增</button>
            <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="delAll">批量删除</button>
        </div>
        <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
                <label class="layui-form-label" style="width: 110px; text-align: center">券商名称</label>
                <div class="layui-inline layui-show-xs-block">
                    <input class="layui-input" placeholder="请输入" name="bondName" style="width: 250px" id="bondName">
                </div>
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button class="layui-btn layui-btn-primary" lay-event="search" lay-submit="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
        </form>
    </script>
    <script type="text/javascript" src="layui/lay/modules/tableSelect.js"></script>
    <script type="text/javascript">
        layui.use(['table','form','laydate','tableSelect'], function() {
            var table = layui.table;//得到layui 的table组件
            var $ = layui.jquery;
            var form = layui.form;
            var laydate = layui.laydate;
            tableSelect = layui.tableSelect,
            //表格的渲染  给表格加样式 加数据
            table.render({
                //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
                elem: '#bondmo',
                //url 表格的数据来源  从数据库查询
                url: 'bondSelect?bondName=',
                id:'tableId',
                toolbar: '#bondBar',
                height:'full-20',
                page: true,
                limits: [3, 5, 8, 10],
                cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'bondId', title: '债券编号', align:'center', sort: true}
                    , {field: 'bondName', title: '债券名称', align:'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'bondstartDate', title: '计息起始日', align:'center', sort: true}
                    , {field: 'bondEndDate', title: '计息结束日'}
                    , {field: 'bondType', title: '债券类型', align:'center',templet:function (it) {
                            if (it.bondType==1){
                                return "银行间"
                            } else {
                                return "非银行间"
                            }
                        }}
                    , {field: 'bondMoney', title: '票面金额', align:'center'}
                    , {field: 'bondLiXi', title: '债券利息', align:'center'}
                    , {field: 'bondRate', title: '票面利率', align:'center'}
                    , {field: 'ciShu', title: '付息次数', align:'center',templet:function (item) {
                            if (item.ciShu==1){
                                return "一年一付"
                            } else if (item.ciShu==2){
                                return "一年两付"
                            }else {
                                return "一年四付"
                            }
                        }}
                    , {field: 'bondBeiZhu', title: '备注', align:'center'}
                    , {fixed: '', width: 165, align: 'center', toolbar: '#bondDemo'}
                ]]
            });
            table.on('toolbar(bondmo)',function (obj) {
                //根据事件对象 来判定点击的是哪一个案例
                if(obj.event=='bondInsert'){
                    layer.open({
                        type:1,
                        area:['900px','450px'],
                        content: $("#bondContent")
                    });
                }else if(obj.event=='search'){
                    //alert('根据条件查询')
                    var bondName=$("#bondName").val();
                    //表格的重新加载事件
                    table.reload('tableId', {
                        url:'bondSelect',
                         where: {
                            'bondName': bondName,
                        }
                        , page: {
                            curr: 1
                        }
                    });
                }
            });
            //给增加的form绑定提交事件
            form.on('submit(bondform)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据 
                var formData= form.val("bondform");
                $.post(
                    "bondInsert",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                        alert(msg);

                    });

            });
            /*修改*/
            table.on('tool(bondmo)',function (obj) {
                switch (obj.event) {
                    case "edit":
                        //得到选中行的数据
                        var data=obj.data;
                        //JSON.stringify(data)  拼接成JSON格式的字符串
                        var bondObj=$.parseJSON(JSON.stringify(data));
                        //弹出一个修改的窗口
                        form.val("bondUpdateform",bondObj);
                        layer.open({
                            type:1, //iframe /内嵌窗口
                            area:['900px','450px'],
                            content: $("#bondUpdate")
                        });

                        break;
                    case "del":
                        var data=obj.data;
                        alert("这是删除的操作"+data.bondId);
                        $.ajax({
                            url:"bondDelete",
                            type:"get",
                            data:"bondId="+data.bondId,
                            dataType:"text",
                            contentType:"application/x-www-form-urlencoded",
                        });
                        window.location.reload();
                        break;
                }
            });

            //给修改的form绑定提交事件
            form.on('submit(bondUpdateform)',function () {
                //发送ajax请求到 服务器，
                //得到表单的所有数据
                var formData= form.val("bondUpdateform");
                $.post(
                    "bondUpdate",
                    formData,
                    function(msg) {
                        //重新刷新表格
                        //给予提示信息，增加成功
                        alert(msg);

                    });
            });

            laydate.render({
                elem: '#dates',
                trigger:'click',
            });
            laydate.render({
                elem: '#datec',
                //解决窗口闪退
                trigger:'click',
            });
            laydate.render({
                elem: '#xiumou',
                //解决窗口闪退
                trigger:'click',
            });
            laydate.render({
                elem: '#xiude',
                //解决窗口闪退
                trigger:'click',
            });
            tableSelect.render({
                //下拉表格 的渲染
                elem: '#bondId',//渲染表格 与 文本框绑定
                searchKey:'bondId',//后端根据这个名称得到下拉表格中文本框的值
                checkedKey:'bondIdi',
                table: {
                    url: 'select?securityName=',
                    //数据接口
                    cols: [[
                        {type: 'radio'},
                        {field:'securityId', title: '证券编号', sort: true}
                         //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'securityName', title: '证券名称', sort: true}
                    ]]
                },
                //回调函数
                done: function (elem, data) {
                    var Name='';
                    //遍历选中的数据
                    $.each(data.data,function (index,item) {
                        Name=item.securityName;
                        $("#securityName").val(item.securityName);
                        alert(item.securityId);
                        $('#bondIds').val(item.securityId);

                    });
                    elem.val(Name);//给输入框里显示的值赋值
                }
            });
        });

    </script>
    <table id="bondmo" lay-filter="bondmo"></table>
    <div style="display: none;" id="bondDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i
                class="layui-icon">&#xe642;</i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                class="layui-icon">&#xe640;</i>删除</a>

    </div>
    <div id="bondContent"
         style="display: none; height: 100%; height: 100%; text-align: center;">
        <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
        <form id="bondform" lay-filter="bondform"
              class="layui-form layui-form-pane"
              style="margin: 30px auto; display: inline-block;">
            <div style="float: left; width: 50%;">
            <div class="layui-form-item" style="text-align: center;">
                <!--标签-->
                <label class="layui-form-label">债券编号</label>
                <div class="layui-input-inline">
                    <!--输入框  lay-verify =“required” 必填-->
                    <input type="text" name="bondId" id="bondId" lay-verify="required"
                           autocomplete="off" placeholder="债券编号" class="layui-input">
                    <input type="hidden" id="bondIds" name="bondIdi">

                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">债券名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondName" lay-verify="required"
                           autocomplete="off" placeholder="债券名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">计息起始日</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondstartDate" class="layui-input" id="dates" placeholder="计息起始日" >
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">计息结束日</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondEndDate" class="layui-input" id="datec" placeholder="计息结束日" >
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">债券类型</label>
                <div class="layui-input-inline">
                    <select name="bondType" class="layui-input">
                        <option value=""></option>
                        <option value="1">银行间</option>
                        <option value="2">非银行间</option>
                    </select>
                </div>
            </div>
            </div>
            <div style="float: left; width: 50%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">票面金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondMoney" lay-verify="required"
                           autocomplete="off" placeholder="票面金额" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">债券利息</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondLiXi" lay-verify="required"
                           autocomplete="off" placeholder="债券利息" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">票面利率</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondRate" lay-verify="required"
                           autocomplete="off" placeholder="票面利率" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">付息次数</label>
                <div class="layui-input-inline">
                <select name="ciShu" class="layui-input">
                    <option value=""></option>
                    <option value="1">一年一付</option>
                    <option value="2">一年两付</option>
                    <option value="3">一年四付</option>
                </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="bondBeiZhu" lay-verify="required"
                           autocomplete="off" placeholder="备注" class="layui-input">
                </div>
            </div>
            </div>
            <div style="position: relative; clear: both;">
                <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
                <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                    <i class="layui-icon">&#x1005;</i>添加
                </button>
                <button class="layui-btn layui-bg-red cancel" type="button">
                    <i class="layui-icon">&#x1006;</i>取消
                </button>
            </div>
        </form>
    </div>

    <div id="bondUpdate"
                style="display: none; height: 100%; height: 100%; text-align: center;">
    <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
    <form id="bondUpdateform" lay-filter="bondUpdateform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
        <div style="float: left; width: 50%;">
        <div class="layui-form-item" style="text-align: center;">
            <!--标签-->
            <label class="layui-form-label">债券编号</label>
            <div class="layui-input-inline">
                <!--输入框  lay-verify =“required” 必填-->
                <input type="text" name="bondId" lay-verify="required"
                       autocomplete="off" disabled="disabled" placeholder="债券编号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">债券名称</label>
            <div class="layui-input-inline">
                <input type="text" name="bondName" lay-verify="required"
                       autocomplete="off" placeholder="债券名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">计息起始日</label>
            <div class="layui-input-inline">
                <input type="text" name="bondstartDate" lay-verify="required"
                       autocomplete="off" id="xiumou" placeholder="计息起始日" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">计息结束日</label>
            <div class="layui-input-inline">
                <input type="text" name="bondEndDate" lay-verify="required"
                       autocomplete="off" id="xiude" placeholder="计息结束日" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">债券类型</label>
            <div class="layui-input-inline">
                <select name="bondType" class="layui-input">
                    <option value="1">银行间</option>
                    <option value="2">非银行间</option>
                </select>
            </div>
        </div>
        </div>
        <div style="float: left; width: 50%">
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">票面金额</label>
            <div class="layui-input-inline">
                <input type="text" name="bondMoney" lay-verify="required"
                       autocomplete="off" placeholder="票面金额" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">债券利息</label>
            <div class="layui-input-inline">
                <input type="text" name="bondLiXi" lay-verify="required"
                       autocomplete="off" placeholder="债券利息" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">票面利率</label>
            <div class="layui-input-inline">
                <input type="text" name="bondRate" lay-verify="required"
                       autocomplete="off" placeholder="票面利率" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">付息次数</label>
            <div class="layui-input-inline">
                <select name="ciShu" class="layui-input">
                    <option value="1">一年一付</option>
                    <option value="2">一年两付</option>
                    <option value="3">一年四付</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="bondBeiZhu" lay-verify="required"
                       autocomplete="off" placeholder="备注" class="layui-input">
            </div>
        </div>
        </div>

        <div style="position: relative; clear: both;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>

    </form>
</div>
</head>
<body>

</body>
</html>